<template>
  <view>
    <view class="teamListHeader">
      <view class="teamTopPart">
        <view class="choosePart"
          >本月新增
          <text
            :class="teamType == 'HJ' ? 'chooseItem' : 'unChoose'"
            @click="chooseItemTab(1)"
            >合作方</text
          >
          <text
            :class="teamType == 'BJ' ? 'chooseItem' : 'unChoose'"
            @click="chooseItemTab(2)"
            >签约方</text
          >
          <view
            class="line"
            :style="teamType == 'HJ' ? 'left:340rpx' : 'left:436rpx'"
          ></view>
        </view>
        <text class="topNum">{{ teamDetail.totalDate }}</text>
        <view
          >较上月增幅：<text class="num">{{
            teamDetail.percentage
          }}</text></view
        >
        <view class="teamBottom">
          <view>
            <text class="num">{{ teamDetail.total }}</text>
            <text>累计{{ teamType == "HJ" ? "合作方" : "签约方" }}</text>
          </view>
          <view>
            <text class="num">{{ teamDetail.lastMouthTotal }}</text>
            <text>上月新增{{ teamType == "HJ" ? "合作方" : "签约方" }}</text>
          </view>
        </view>
      </view>
      <u-sticky :enable="enable">
        <view class="myTerminalSearch solid-bottom">
          <view class="totalView" @click="screenTap">
            {{ itemTitle }}
            ({{ teamTotal }})
            <u-icon
              class="uIcon"
              name="arrow-down-fill"
              color="#999"
              size="12"
            ></u-icon>
          </view>
          <u-search
            class="myTerminalSearchInput"
            placeholder="请输入名称手机号代理商号"
            placeholder-style="font-size:24rpx"
            bg-color="#fff"
            shape="square"
            :show-action="true"
            v-model="keyword"
            :clearabled="true"
            @search="inputChange"
            @change="inputingTap"
            @custom="inputChange"
          ></u-search>
        </view>
      </u-sticky>
    </view>

    <view class="teamList" v-if="teamList.length > 0">
      <view
        class="teamInfo solid-bottom flex align-center justify-between"
        v-for="(item, index) in teamList"
        :key="index"
        @click="$u.route('/pages/myTeam/teamDetail', { userId: item.user_id })"
      >
        <view class="user">
          <text>{{
            item.nick_name
          }}</text>
          <text>{{
            item.account.substring(0, 3) +
            "****" +
            item.account.substr(item.account.length - 4)
          }}</text>
        </view>
        <view class="money">
          <text>{{ $tools.format(item.trade_amount_sum) }} 元</text>
          <u-icon name="arrow-right" size="30"></u-icon>
        </view>
      </view>
    </view>

    <view class="noMachine" v-if="teamList.length == 0 && isLoad">
      <image src="../../static/images/noData/zwsy.png" mode="widthFix"></image>
      <text>暂无团队</text>
    </view>
    <u-loadmore
      :status="status"
      @loadmore="loadmore"
      v-if="teamList.length > 0"
    />
    <u-toast ref="uToast" />
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <toast></toast>
    <view style="height: 60rpx"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      enable: true,
      keyword: "",
      itemTitle: "合作方",
      screenShow: false,
      user_type: "HJ",
      teamList: [],
      teamTotal: 0,
      page: 1,
      pageNumber: 10,
      status: "loadmore",
      noMore: false,
      isLoad: false,

      teamType: "HJ",
      teamDetail: {
        totalDate: 0,
        percentage: "0.00%",
        total: 0,
        lastMouthTotal: 0,
      },
    };
  },
  onLoad() {
    this.getUserList();
    this.userTeamMonthDetail();
  },
  onShow() {
    this.enable = true;
  },
  onHide() {
    this.enable = false;
  },
  onPullDownRefresh() {
    this.teamList = [];
    this.page = 1;
    this.status = "loadmore";
    this.keyword = "";
    this.noMore = false;
    this.isLoad = false;
    this.getUserList();
  },
  onReachBottom() {
    if (this.noMore) {
      this.status = "nomore";
    } else {
      this.status = "loading";
      this.page = ++this.page;
      this.getUserList();
    }
  },
  // 点击下载更多
  loadmore() {
    if (this.noMore) {
      this.status = "nomore";
    } else {
      this.page = ++this.page;
      this.status = "loadmore";
      this.getUserList();
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    // 选择切换
    chooseItemTab(num) {
      if (num == 1) {
        (this.teamType = "HJ"), this.userTeamMonthDetail();
        this.itemTitle = "合作方";
        this.keyword = "";
        this.page = 1;
        this.teamList = [];
        this.user_type = "HJ";
        this.getUserList();
      } else {
        (this.teamType = "BJ"), this.userTeamMonthDetail();
        this.itemTitle = "签约方";
        this.keyword = "";
        this.page = 1;
        this.teamList = [];
        this.user_type = "BJ";
        this.getUserList();
      }
    },

    // 团队新增详情
    userTeamMonthDetail() {
      this.isLoad = false;
      this.$u.api
        .userTeamMonthDetail({
          user_type: this.teamType,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.teamDetail.totalDate = datas.this_month_add_count;
            this.teamDetail.percentage = datas.add_precent;
            this.teamDetail.total = datas.total_add_count;
            this.teamDetail.lastMouthTotal = datas.last_month_add_count;
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    inputingTap(e) {
      if (e.length == 0) {
        this.keyword = "";
        this.isLoad = false;
        this.status = "loadmore";
        this.noMore = false;
        this.page = 1;
        this.teamList = [];
        this.getUserList();
      }
    },
    inputChange(e) {
      this.keyword = e;
      this.isLoad = false;
      this.status = "loadmore";
      this.noMore = false;
      this.page = 1;
      this.teamList = [];
      this.getUserList();
    },
    // 筛选弹窗
    screenTap() {
      let that = this;
      uni.showActionSheet({
        itemList: ["合作方", "签约方"],
        success: function (res) {
          if (res.tapIndex == 0) {
            that.teamType = "HJ";
            that.itemTitle = "合作方";
            that.keyword = "";
            that.page = 1;
            that.teamList = [];
            that.user_type = "HJ";
            that.userTeamMonthDetail();
            that.getUserList();
          } else if (res.tapIndex == 1) {
            that.teamType = "BJ";
            that.itemTitle = "签约方";
            that.keyword = "";
            that.page = 1;
            that.teamList = [];
            that.user_type = "BJ";
            that.userTeamMonthDetail();
            that.getUserList();
          }
        },
      });
    },
    getUserList() {
      this.isLoad = false;
      this.$u.api
        .userlist({
          page: this.page,
          pageNumber: this.pageNumber,
          user_type: this.user_type,
          key_words: this.keyword,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            this.teamTotal = res.result.total;
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            datas = this.$tools.aesDecryptBat(this, datas, "account");
            this.teamList = this.teamList.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    // 搜索团队
    searchTeamTab() {
      this.isLoad = false;
      this.teamList = [];
      this.user_type = "";
      this.page = 1;
      this.getUserList();
      this.status = "nomore";
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.teamListHeader {
  background-color: #fff;
  text-align: center;
  font-family: numberFont;

  .num {
    font-size: 28rpx;
    color: #fb4535;
    font-weight: 700;
    letter-spacing: 5rpx;
  }

  .teamTopPart {
    padding-top: 22rpx;

    .topNum {
      padding: 30rpx 0 10rpx;
      display: inline-block;
      font-size: 92rpx;
      color: #fb4535;
      font-weight: 700;
      letter-spacing: 5rpx;
    }

    .choosePart {
      position: relative;

      text {
        letter-spacing: 3rpx;
        padding-left: 10rpx;
      }

      .chooseItem {
        color: #fb4535;
        font-weight: 700;
        transition: 0.4s;
      }

      .unChoose {
        color: #5e5e5e;
      }

      .line {
        position: absolute;
        bottom: -10rpx;
        left: 340rpx;
        width: 90rpx;
        height: 7rpx;
        background-color: #fb4535;
        border-radius: 50rpx;
        transition: 0.6s;
      }
    }
  }

  .teamBottom {
    margin: 20rpx 0;
    display: flex;
    justify-content: space-around;

    & > view {
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .num {
        padding-bottom: 10rpx;
        font-size: 40rpx;
      }
    }
  }
}

.myTerminalSearch {
  border-top: 1rpx solid #f3f3f3;
  background-color: #fff;
  height: 80rpx;
  width: 100%;
  overflow: hidden;
  padding-right: 20rpx;
  box-sizing: border-box;

  .totalView {
    width: 30%;
    height: 80rpx;
    float: left;
    line-height: 80rpx;
    border-right: 2rpx solid #f1f1f1;
    position: relative;

    .uIcon {
      position: absolute;
      top: 50%;
      right: 5rpx;
      margin-top: -6px;
      transform: scale(0.7);
    }
  }

  .myTerminalSearchInput {
    height: 80upx;
    width: 70%;
    float: left;
  }
}

.headPart {
  height: 150rpx;
  background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
  padding: 0 30rpx;

  .bgc {
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 999;
  }

  .showPart {
    display: flex;
    justify-content: space-between;
    padding: 24rpx 10rpx;
    color: #fff;
  }

  .search {
    position: relative;
    box-shadow: 3rpx 5rpx 16rpx #d9d9d9;
    border-radius: 25rpx;
    padding: 0 20rpx;
    height: 60rpx;
    background-color: #fff;
    flex: 1;

    input {
      height: 60rpx;
      line-height: 60rpx;
      font-size: 28rpx;
    }
  }

  .btnSearch {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    width: 100rpx;
    text-align: center;
    color: #777;
    line-height: 20px;
    height: 40rpx;
    z-index: 99;
    border-left: solid 1rpx #bbb;
  }
}

.teamList {
  padding: 30rpx;
  font-family: numberfont;

  .teamInfo {
    padding: 20rpx;
    border-radius: 20rpx;
    overflow: hidden;
    & > .user {
      text:first-child {
        padding-bottom: 10rpx;
        display: block;
        width: 400rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    & > .money {
      float: right;
      line-height: 40rpx;

      text:first-child {
        padding-right: 30rpx;
      }
    }

    image {
      float: left;
      width: 80rpx;
      height: 80rpx;
      border: 6rpx solid #fc6306;
      border-radius: 50%;
      padding: 10rpx;
      background-color: #fc6306;
    }
  }
}

.chooseViewMain {
  position: relative;

  .chooseViewHeader {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;

    .backView {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      top: 0;
    }

    .comfirmView {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fb4535;
      padding: 0 30rpx;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .chooseViewBox {
    padding: 100rpx 30rpx 0;

    .chooseViewItem {
      height: 100rpx;
      flex-direction: column;

      view {
        font-size: 26rpx;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #ececec;
      }

      .active {
        color: #fb4535;
      }
    }
  }
}
</style>
